<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <style >
        html body {
            height: 100%;
            width: 100%;
        }

        #captchaContainer{
            position: absolute;
            top: 50px;
            left: 40%;
          /*  background-color: #f57a7a;*/
            height: 340px;
            width: 260px;
        }
        .header{

            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgb(245, 236, 236);
            height: 40px;
            width: 300px;
        }
        .headerText{
            position: absolute;
            top: 13px;
            left: 90px;
            height: 40px;

            color:#66c523;
            font:18px/14px Georgia, "Times New Roman", Times, serif;


        }

        #captchaImg{
            position: absolute;
            left: 0;
            top: 40px;
            height: 260px;
            width: 300px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: none


        }
        #oriImg{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 300px;
            height: 260px;

            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: none

        }
        #cutImg{
            position: absolute;
            border: none;
            left: 0px;
        }
        .sliderContainer {
            position: absolute;
            bottom: 0;
            left: 0px;
            text-align: center;
            width: 300px;
            height: 40px;
            line-height: 40px;
            background: #f7f9fa;
            color: #45494c;
            border: 1px solid #e4e7eb;

        }

        .sliderContainer_success{
            border: 1px solid hsl(125, 93%, 44%);
        }
        .sliderContainer_fail{
            border: 1px solid #ec3655;
        }

        .slider {
            position: absolute;
            top: 0;
            left: 0px;
            width: 40px;
            height: 40px;
            background: #fff;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
            transition: background .2s linear;
            cursor: pointer;
            cursor: grab;
        }
        .slider_success{
            border: 1px solid hsl(125, 93%, 44%);
        }
        .slider_fail{
            border: 1px solid #ec3655;
        }



        .sliderContainer_active .slider {
            height: 38px;
            top: -1px;
            border: 1px solid #1991FA;
        }

        .sliderContainer_active .sliderMask {
            height: 38px;
            border-width: 1px;
        }

        .sliderContainer_success .slider {
            height: 38px;
            top: -1px;
            margin-left: -1px;
            border: 1px solid #52CCBA;
            background-color: #52CCBA !important;
        }

        .sliderContainer_success .sliderMask {
            height: 38px;
            border: 1px solid #52CCBA;
            background-color: #D2F4EF;
        }

        .sliderContainer_success .sliderIcon {
            background-position: 0 0 !important;
        }

        .sliderContainer_fail .slider {
            height: 38px;
            top: -1px;
            border: 1px solid #f57a7a;
            background-color: #f57a7a !important;
        }

        .sliderContainer_fail .sliderMask {
            height: 38px;
            border: 1px solid #f57a7a;
            background-color: #fce1e1;
        }

        .sliderContainer_fail .sliderIcon {
            top: 14px;
            background-position: 0 -82px !important;
        }
        .sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {
            display: none;
        }

        .sliderMask {
            position: absolute;
            left: 0;
            top: 0;
            height: 40px;
            border: 0 solid #1991FA;
            background: #D1E9FE;
        }



        .slider:active {
            cursor: grabbing;
        }

        .slider:hover {
            background: #1991FA;
        }

        .slider:hover .sliderIcon {
            background-position: 0 -13px;
        }

        .sliderIcon {
            position: absolute;
            top: 15px;
            left: 13px;
            width: 14px;
            height: 12px;
            background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -26px;
            background-size: 34px 471px;
        }

        .refreshIcon {
            position: absolute;
            right: 0;
            top: 0;
            width: 34px;
            height: 34px;
            cursor: pointer;
            background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -437px;
            background-size: 34px 471px;
        }



    </style>

</head>
<body>
    
    <div id="captchaContainer">
        <!-- 标题栏　-->
        <div class="header">
            <span class="headerText">图片滑动验证</span>
            <span class="refreshIcon"/>
        </div> 

        <!-- 图片显示区域　-->
        <div id="captchaImg">
            <img id="oriImg" src="dd" alt="原图"/>
            <img id="cutImg" src="sa" alt="抠图"/>
        </div>
        <!--滑块显示区域-->
         <div class="sliderContainer">
            <div class="sliderMask">
                <div class="slider">
                    <span class="sliderIcon"></span>
                </div>
            </div>
            <span class="sliderText">向右滑动填充拼图</span>
            
        </div> 

        
    </div>


    
</body>

<script>

    //图片显示使用base64时的前缀,src=base64PrefixPath + imgBase64Value
    var base64PrefixPath="data:image/png;base64,";

    var IMAGE_WIDTH = 300;
    //初始化
    //滑块初始偏移量
    var sliderInitOffset = 0;
    //滑块移动的最值
    var MIN_MOVE = 0;
    var MAX_MOVE = 0;
    //鼠标按下标志
    var mousedownFlag=false;
    //滑块移动的距离
    var moveX;
    //滑块位置检测允许的误差，正负２
    var MOVE_CHECK_ERROR = 2;
    //滑块滑动使能
    var moveEnable = true;

    var ImageMsg = {
            //抠图的坐标
            xpos: 0,
            ypos: 0,
            //抠图的大小
            cutImageWidth: 0,
            cutImageHeight: 0,
            //原图的base64
            oriImageSrc: 0,
            //抠图的base64
            cutImageSrc: 0,
    }



  　//加载页面时进行初始化
    function init(){
        console.log("init")

        moveEnable = true;
        mousedownFlag=false;

        $(".slider").css("left",0+"px");

        initClass();

        MAX_MOVE = IMAGE_WIDTH - ImageMsg.cutImageWidth;

        console.log("ImageMsg = " + ImageMsg)
        $("#cutImg").css("left",0+"px");
        $("#oriImg").attr("src",ImageMsg.oriImageSrc)
        $("#cutImg").attr("src",ImageMsg.cutImageSrc)
        $("#cutImg").css("width",ImageMsg.cutImageWidth)
        $("#cutImg").css("height",ImageMsg.cutImageHeight)
        $("#cutImg").css("top",ImageMsg.ypos)




    }
    //加载页面时
    $(function(){

        httpRequest.requestImage.request();
    })

    var httpRequest={
      //请求获取图片
      requestImage:{
        path: "slider/image",
        request:function(){
            $.get(httpRequest.requestImage.path,function(data,status){

                console.log(data)
                console.log(data.message);

                if(data.data != null){

                    ImageMsg.oriImageSrc = base64PrefixPath + data.data.oriImage;
                    ImageMsg.cutImageSrc = base64PrefixPath + data.data.cutImage;
                    ImageMsg.xpos = data.data.xpos;
                    ImageMsg.ypos = data.data.ypos;
                    ImageMsg.cutImageWidth = data.data.cutImageWidth;
                    ImageMsg.cutImageHeight = data.data.cutImageHeight;

                    init();
                }

          });
        },
      },
      //请求验证
      requestVerification:{
        path: "slider/verification",
        request:function(){
            $.get(httpRequest.requestVerification.path,{moveX:(moveX)},function(data,status){
                console.log(data)
                console.log(data.code);
                console.log(data.message);

                if(data.data == true){
                    checkSuccessHandle();
                }
                else{
                    checkFailHandle();
                }
          });
        },
      },
    }

    //刷新图片操作
    $(".refreshIcon").on("click",function(){
        httpRequest.requestImage.request();
    })

    //滑块鼠标按下
    $(".slider").mousedown(function(event){
        console.log("鼠标按下mousedown:"+event.clientX + " " + event.clientY);
        sliderInitOffset = event.clientX;  
        mousedownFlag = true;

        

        //滑块绑定鼠标滑动事件
        $(".slider").on("mousemove",function(event){
            if(mousedownFlag  == false){
              return;
            }
            if(moveEnable == false){
              return
            }

            moveX = event.clientX - sliderInitOffset;

            moveX<MIN_MOVE?moveX=MIN_MOVE:moveX=moveX;
            moveX>MAX_MOVE?moveX=MAX_MOVE:moveX=moveX;


            $(this).css("left",moveX+"px");
            $("#cutImg").css("left",moveX+"px");
        })

    })
    //滑块鼠标弹起操作
    $(".slider").mouseup(function(event){
        console.log("mouseup:"+event.clientX + " " + event.clientY);
        sliderInitOffset = 0;
        $(this).off("mousemove");
        mousedownFlag=false;
        console.log("moveX　＝　" + moveX)
        checkLocation();
        
    })
    //检测滑块　位置是否正确
    function checkLocation(){

        moveEnable = false;

        //后端请求检测滑块位置
        httpRequest.requestVerification.request();
    }

    function checkSuccessHandle(){
      $(".sliderContainer").addClass("sliderContainer_success");
      $(".slider").addClass("slider_success");
    }
    function checkFailHandle(){
      $(".sliderContainer").addClass("sliderContainer_fail");
      $(".slider").addClass("slider_success");
    }

    function initClass(){
      $(".sliderContainer").removeClass("sliderContainer_success");
      $(".slider").removeClass("slider_success");
  
      $(".sliderContainer").removeClass("sliderContainer_fail");
      $(".slider").removeClass("slider_fail");
    }
    


</script>


</html>